<template>
  <view class="container">
    <div class="page-top "></div>

    <view style="width: 90%;margin: auto">
      <view class="add_car" @click="add_item">
        <van-row>
          <van-col span="4">
            <view>
              <van-icon name="add-o" size="30px"/>
            </view>
          </van-col>
          <van-col span="20">
            <view class="item_label">
              <text>添加接单地址</text>
            </view>
          </van-col>
        </van-row>
      </view>

      <view class="detail" v-for="(item,index) in list" :key="index">

        <van-row>

          <van-col span="24">
            <view class="carname">
              <text>接单地址名称：{{ item.provinceInfo.text }}（{{ item.cityInfo.text }}）</text>
            </view>
          </van-col>
        </van-row>

        <van-divider/>
        <view style="text-align: right">
          <van-button round color="#ff9800" size="small" @click="onDelItem(item)">删除</van-button>
        </view>
      </view>

    </view>

    <van-popup
      :show="popShow"
      position="bottom"
    >
      <van-area :area-list="areaList" @confirm="onPopConfirm" @cancel="onPopCancel" :columns-num="2" title="接单城市"/>
    </van-popup>
    <van-dialog id="van-dialog"/>


  </view>
</template>

<script>

import {addOrderAddress, delOrderAddress, getOrderAddressList} from "../../../requests/merchant/order_address";

import {showToast} from "../../../requests/tools";
import {areaList} from "../../../store/areaData";
import Dialog from "../../../../static/vant/dialog/dialog";


var $this;
export default {
  name: 'CarsContainer',
  components: {},
  props: {},
  data() {
    // 这里存放数据
    return {
      list: [],
      popShow: false,
      areaList: areaList
    }
  },
  // 方法集合
  methods: {
    initPage() {
      getOrderAddressList().then(res => {
        $this.list = res.data;
      })
    },
    add_item() {
      $this.popShow = true;
    },
    onEditItem(id) {
      mpvue.navigateTo({
        url: "/pages/merchant/car/add/main?id=" + id,
      })
    },
    onDelItem(item) {
      let content = `是否删除【${item['province_name']}】【${item['city_name']}】`

      let $id = item.id;
      wx.showModal({
        title: '提示',
        content: content,
        success(res) {
          if (res.confirm) {
            delOrderAddress($id).then(res => {
              showToast(res.code === 0, res.msg);
              $this.initPage();
            })
          }
        }
      })

    },
    onPopConfirm(e) {
      let datas = e.mp.detail.values
      Dialog.confirm(({
        title: "系统提示",
        message: `绑定的地址为【${datas[0]['name']}】【${datas[1]['name']}】`,
      })).then(() => {
        addOrderAddress(datas).then(res => {
          showToast(res.code === 0, res.msg)
          $this.initPage()
        })
      })
      $this.popShow = false;
    },
    onPopCancel() {
      $this.popShow = false;
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    $this = this;
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  onShow() {
    /**
     * 获取接单地址列表
     */
    $this.initPage();
  },
}
</script>

<style>
@import "index.css";

</style>
